<script setup lang="ts">
  import { ref } from 'vue'
  import { useReminderForm } from './services'
  import { FormInstance } from 'element-plus'

  const { form, submitLoading, submit, reset } = useReminderForm()

  const formRef = ref<FormInstance | null>(null)
  const remindEmpTypeOptions = ref([
    { label: '工单客服', value: 1 },
    { label: '网点负责人', value: 2 },
    { label: '工程师', value: 3 },
  ])

  const rules = ref({
    content: [
      {
        required: true,
        message: '请输入催单内容',
        trigger: ['change', 'blur'],
      },
    ],
    remindEmpType: [
      {
        required: true,
        message: '请选择提醒人员',
        trigger: ['change', 'blur'],
      },
      {
        validator: (rule, value: Array<number>, callback) => {
          if (form.value.remindEmpType.length <= 0) {
            callback(new Error('请选择提醒人员'))
          } else {
            callback()
          }
        },
        trigger: ['change', 'blur'],
      },
    ],
  })

  defineExpose({
    submitLoading,
    submit: async (orderIds: Array<string>) => {
      if (!formRef.value) {
        return null
      }

      try {
        await formRef.value.validate()
        return await submit(orderIds)
      } catch (error) {
        return null
      }
    },
    reset: () => {
      if (formRef.value) {
        formRef.value.resetFields()
        reset()
      }
    },
  })
</script>

<template>
  <el-form
    ref="formRef"
    :rules="rules"
    :model="form"
    class="modal_form_content"
    label-position="top"
    inline-message
  >
    <!--提醒人员-->
    <el-form-item label="提醒人员" prop="remindEmpType">
      <el-select
        v-model="form.remindEmpType"
        multiple
        placeholder="请选择"
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="3"
      >
        <el-option
          v-for="item in remindEmpTypeOptions"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!--催单备注-->
    <el-form-item required label="催单备注" prop="content">
      <el-input
        v-model.trim="form.content"
        type="textarea"
        maxlength="200"
        placeholder="请输入催单备注"
        show-word-limit
        resize="both"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
  :deep(.el-textarea) {
    .el-textarea__inner {
      min-height: 75px !important;
      width: 100% !important;
      max-height: 140px !important;
      overflow: hidden;
    }
  }
</style>
